body, html {
	height: 100%;
	margin: 0;
}

* {
	box-sizing: border-box;
}

.display {
	margin: 0;
	font-weight: bold;
	font-size: 4em;
	text-transform: lowercase;
}

.heading {
	margin: 0;
	font-weight: normal;
	font-size: 2em;
}

.sub-heading {
	margin: 2em 0 0 0;
	font-weight: bold;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.0625em;
}

body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.bar {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	padding: 0em 1em;
	flex-shrink: 0;
}

.band {
	position: relative;
	min-height: 4em;
	width: auto;
	flex-shrink: 0;
}

.panel {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0em 3em;
	padding: 2em;
	width: auto;
	flex-shrink: 0;
}

.column, .column-double, .column-triple {
	display: flex;
	margin: 0em 1em;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	width: auto;
}

.row {
	display: flex;
	padding: 1em 0em;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.column>.row, .column-double>.row, .column-triple>.row {
	width: auto;
}

.column>.row>*, .column-double>.row>*, .column-triple>.row>* {
	flex: 1;
}

.background {
	position: fixed;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
}

.background img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	min-width: 50%;
	min-height: 50%;
}

.flow {
	display: block;
}

.workspace {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	flex-shrink: 0;
}

.workspace>.panel {
	margin: 3em;
}

.workspace>.panel+.panel {
	margin-top: 0em;
}

@media (min-width: 512px) {
	
	.panel {
	    margin: 0em 4em;
	}
	
	.workspace>.panel {
		margin: 6em;
	}
	
	.column {
		flex: 1 1;
	}
	
	.column-double {
		flex: 2 1;
	}
	
	.column-triple {
		flex: 3 1;
	}

}

@media (min-width: 800px) {

	.flow {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		-moz-column-gap: 1em;
		-webkit-column-gap: 1em;
		column-gap: 1em;
	}

}

@media (min-width: 1024px) {
	
	.panel {
	    margin: 0em 8em;
	}
	
	.workspace>.panel {
		margin: 12em;
	}
	
}

@media (min-width: 1280px) {
	
	.panel {
		width: 1024px;
		margin: auto;
	}
	
	.workspace {
		align-items: center;
	}
	
	.workspace>.panel {
		margin: 12em auto;
	}
	
	.flow {
		-moz-column-count: 3;
		-webkit-column-count: 3;
		column-count: 3;
	}
	
}